<template>
  <div>
    <el-table :data="orderData" style="width: 100%">
      <el-table-column prop="times" label="场次" width="180">
      </el-table-column>
      <el-table-column label="详情">
        <template slot-scope="scope">
          <div v-for="item in scope.row.orderListVo">
            <b>{{item.payAccountId}}({{item.payAccountMobile}})</b>&nbsp;男士{{item.maleNums}}位,女士{{item.femaleNums}}位&nbsp;{{item.orderStatus | state}}&nbsp;&nbsp;
            <el-button @click="refund(item)" v-if="!item.orderStatus" type="text" size="small">退款</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="handleSoldout(scope.row)" type="text" size="small">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import http from '@/services/xhr';
import apiSetting from '@/services/api';

export default {
  name: 'gameList',
  props: ['topicList'],
  data() {
    return {
      orderData: []
    };
  },
  watch: {
    topicList: {
      handler(form) {
        this.init();
      },
      deep: true
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let data = {
        shopId: this.topicList.shopId,
        platformId: this.topicList.platformId,
        topicId: this.topicList.topicId
      };
      http(apiSetting.getOrderList, data).then(res => {
        this.orderData = res.data.data.goodsListVo;
      });
    },
    refund(item) {
      let data = {
        orderId: item.orderId
      };
      this.$confirm('是否将此订单退款?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          http(apiSetting.delTopic, data).then(res => {
            item.orderStatus = 1;
            this.$message({
              type: 'success',
              message: '已退款'
            });
          });
        })
        .catch(() => {});
    },
    handleSoldout(row) {}
  },
  filters: {
    state(value) {
      return value === 1 ? '已退款' : '';
    }
  }
};
</script>
